<template>
  <EcDialog v-model="dialogVisible" :auto-height="true" :show-fullscreen="false">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <span>请选择地区</span>
      </div>
    </template>

    <!-- 内容数据 -->
    <div style="padding: 0 16px;">
      <el-button plain size="small" type="primary" @click="handleSelectedAll">{{ selectedAll ? '全不选' : '全选' }}</el-button>
      <el-checkbox-group v-model="selected" style="margin-top: 10px;">
        <el-checkbox v-for="item in addressList" :key="item.code" :value="item.code">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSelected">确 定</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { EcDialog } from '@/components/dialog';
import { ref } from 'vue';

const selected = ref<any[]>([]);
const dialogVisible = ref(false);

/** 打开弹窗 */
const open = async (val?: any[]) => {
  dialogVisible.value = true;
  selected.value = val || [];
  selectedAll.value = selected.value.length == addressList.length;
};


/** 全选/全不选 */
const selectedAll = ref(false) // 全选/全不选
const handleSelectedAll = () => {
  selectedAll.value = !selectedAll.value;
  if (selectedAll.value) {
    selected.value = addressList.map(item => item.code);
  } else {
    selected.value = [];
  }
};

/** 处理确认操作 */
const emit = defineEmits(['selected']);
const handleSelected = () => {
  let itemList = selected.value.map(item => addressList.find(it => it.code === item));
  emit('selected', itemList);
  dialogVisible.value = false;
};

const formatSelected = (val?: any[]) => {
  let itemList = val?.map(item => addressList.find(it => it.code === item));
  emit('selected', itemList);
};

// 提供 open 方法，用于打开弹窗
defineExpose({open, formatSelected});

/** 地址数据 */
const addressList = [
  {'code': 110000, 'name': '北京'},
  {'code': 120000, 'name': '天津'},
  {'code': 130000, 'name': '河北'},
  {'code': 140000, 'name': '山西'},
  {'code': 150000, 'name': '内蒙古自治区'},
  {'code': 210000, 'name': '辽宁'},
  {'code': 220000, 'name': '吉林'},
  {'code': 230000, 'name': '黑龙江'},
  {'code': 310000, 'name': '上海'},
  {'code': 320000, 'name': '江苏'},
  {'code': 330000, 'name': '浙江'},
  {'code': 340000, 'name': '安徽'},
  {'code': 350000, 'name': '福建'},
  {'code': 360000, 'name': '江西'},
  {'code': 370000, 'name': '山东'},
  {'code': 410000, 'name': '河南'},
  {'code': 420000, 'name': '湖北'},
  {'code': 430000, 'name': '湖南'},
  {'code': 440000, 'name': '广东'},
  {'code': 450000, 'name': '广西壮族自治区'},
  {'code': 460000, 'name': '海南'},
  {'code': 500000, 'name': '重庆'},
  {'code': 510000, 'name': '四川'},
  {'code': 520000, 'name': '贵州'},
  {'code': 530000, 'name': '云南'},
  {'code': 540000, 'name': '西藏自治区'},
  {'code': 610000, 'name': '陕西'},
  {'code': 620000, 'name': '甘肃'},
  {'code': 630000, 'name': '青海'},
  {'code': 640000, 'name': '宁夏回族自治区'},
  {'code': 650000, 'name': '新疆维吾尔自治区'},
  {'code': 710000, 'name': '台湾'},
  {'code': 810000, 'name': '香港'},
  {'code': 820000, 'name': '澳门'},
];
</script>

<style lang="scss" scoped>
.el-checkbox-group .el-checkbox {
  float: left;
  width: 160px;
  padding-right: 6px;
  margin: 0;
}
</style>
